<template>
    <div class="flh_dataBase">
        <div class="main">
            <h1 class="title">人力基础数据运算</h1>
            <div class="tableView">
              <!-- 运算依据 -->
              <div class="basis">
                <p class="txt"> <span class="title">运算依据</span> <span class="subTitle">点击文件名可重新上传</span> </p>
                <form id="myForm" enctype='multipart/form-data'>
                  <table class="basisTable">
                    <thead>
                      <tr class="rad-tl10 rad-tr10">
                        <th class="rad-tl10" style="width: 482px;">文件名</th>
                        <th class="rad-tr10" style="width: 1318px;">文件路径</th>
                      </tr>
                    </thead>
                    
                      <tbody>
                          <tr>
                            <td>月底花名册</td>
                              <td>
                                <input name="file1" id="file1" type="file" class="roster" @click="removeFun('#file1','file1Name','loding1','name1','file1Remove')" @change="fileChangeFun('#file1','file1Name','loding1','name1')" accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/> 
                                <span>{{name1}} <i v-if="loding1" class="mask"></i> </span> 
                              </td>
                          </tr>
                          <tr>
                            <td>离职人员名单</td>
                            <td> 
                              <input name="file2" id="file2" type="file" class="roster" @click="removeFun('#file2','file2Name','loding2','name2','file2Remove')" @change="fileChangeFun('#file2','file2Name','loding2','name2')" accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/> 
                              <span>{{name2}} <i v-if="loding2" class="mask"></i> </span> 
                            </td>
                          </tr>
                          <tr class="rad-bl10 rad-br10">
                            <td class="rad-bl10">入职人员名单</td>
                            <td class="rad-br10"> 
                              <input name="file3" id="file3" type="file" class="roster" @click="removeFun('#file3','file3Name','loding3','name3','file3Remove')" @change="fileChangeFun('#file3','file3Name','loding3','name3')" accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/> 
                              <span>{{name3}} <i v-if="loding3" class="mask"></i> </span> 
                            </td>
                          </tr>
                      </tbody>
                  </table>
                </form>
                <div class="basisBtn"> <a href="javascript:;" @click="handleClose">运算</a> </div>
              </div>
              <!-- 运算结果 -->
              <div class="result">
                <h2 class="title">运算结果</h2>
                <!-- 人员数量指标/人员流动指标/人员能力指标 -->
                <div class="personnel">
                  <!-- 人员数量指标 -->
                  <table class="number">
                    <thead>
                      <tr class="rad-tl10 rad-tr10"> <th class="rad-tl10 rad-tr10" colspan="2">人员数量指标</th> </tr>
                    </thead>
                    <tbody>
                      <tr :class="pageData.total.earlyStageNum === 0 ? 'cc' : ''"> <td>期初人数</td> <td>{{pageData.total.earlyStageNum}}</td> </tr>
                      <tr :class="pageData.total.terminalNum === 0 ? 'cc' : ''"> <td>期末人数</td> <td>{{pageData.total.terminalNum}}</td> </tr>
                      <tr :class="pageData.total.addedNum === 0 ? 'cc' : ''"> <td>新增人数</td> <td>{{pageData.total.addedNum}}</td> </tr>
                      <tr :class="pageData.total.reduceNum === 0 ? 'cc' : ''"> <td>减少人数</td> <td>{{pageData.total.reduceNum}}</td> </tr>
                      <tr :class="pageData.total.netGrowthNum === 0 ? 'cc' : ''"> <td>净增长人数</td> <td>{{pageData.total.netGrowthNum}}</td> </tr>
                      <tr :class="pageData.total.netGrowthRate === 0 ? 'cc' : ''" class="rad-bl10 rad-br10"> <td class="rad-bl10">员工增长率</td> <td class="rad-br10">{{pageData.total.netGrowthRate}}%</td> </tr>
                    </tbody>
                  </table>

                  <!-- 人员流动指标 -->
                  <table class="flow">
                    <thead>
                      <tr class="rad-tl10 rad-tr10"> <th class="rad-tl10 rad-tr10" colspan="2">人员流动指标</th> </tr>
                    </thead>
                    <tbody>
                      <tr :class="pageData.total.transferNum === 0 ? 'cc' : ''"> <td>调动人数</td> <td>{{pageData.total.transferNum}}</td> </tr>
                      <tr :class="pageData.total.transferRate === 0 ? 'cc' : ''"> <td>调动人数占比</td> <td>{{pageData.total.transferRate}}</td> </tr>
                      <tr> <td></td> <td></td> </tr>
                      <tr :class="pageData.total.quitNum === 0 ? 'cc' : ''"> <td>离职人数</td> <td>{{pageData.total.quitNum}}</td> </tr>
                      <tr :class="pageData.total.quitRate === 0 ? 'cc' : ''"> <td>离职率</td> <td>{{pageData.total.quitRate}}%</td> </tr>
                      <tr class="rad-bl10 rad-br10"> <td class="rad-bl10"></td> <td class="rad-br10"></td> </tr>
                    </tbody>
                  </table>

                  <!-- 人员能力指标 -->
                  <table class="ability">
                    <thead>
                      <tr class="rad-tl10 rad-tr10"> <th class="rad-tl10 rad-tr10" colspan="2">人员能力指标</th> </tr>
                    </thead>
                    <tbody>
                      <tr :class="pageData.total.personPostMatchingRate === 0 ? 'cc' : ''"> <td>人岗匹配率</td> <td>{{pageData.total.personPostMatchingRate}}</td> </tr>
                      <tr :class="pageData.total.reserveTalentsPromotionRate === 0 ? 'cc' : ''"> <td>后备人才晋升率</td> <td>{{pageData.total.reserveTalentsPromotionRate}}</td> </tr>
                      <tr :class="pageData.total.traineePromotionRate === 0 ? 'cc' : ''"> <td>培训生晋升率</td> <td>{{pageData.total.traineePromotionRate}}</td> </tr>
                      <tr :class="pageData.total.talentPoolNum === 0 ? 'cc' : ''"> <td>人才库人才数</td> <td>{{pageData.total.talentPoolNum}}</td> </tr>
                      <tr :class="pageData.total.internalRecruitmentNum === 0 ? 'cc' : ''"> <td>内部录用人数</td> <td>{{pageData.total.internalRecruitmentNum}}</td> </tr>
                      <tr :class="pageData.total.internalRecruitmentRate === 0 ? 'cc' : ''" class="rad-bl10 rad-br10"> <td class="rad-bl10">内部录用率</td> <td class="rad-br10">{{pageData.total.internalRecruitmentRate}}%</td> </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 人力资源结构指示 -->
                <table class="hrStructure">
                  <thead>
                    <tr class="rad-tl10 rad-tr10"> <th class="rad-tl10 rad-tr10" colspan="7">人力资源结构指示</th> </tr>
                    <tr class="layer">
                      <th :colspan="pageData.singleTargetList[0].list.length" style="width: 772px;" class="der-right">职级分布</th>
                      <th :colspan="pageData.singleTargetList[1].list.length" style="width: 1028px;">职系分布</th>
                    </tr>
                    <tr class="layer normal">
                      <th v-for="(item,index) in pageData.singleTargetList[0].list" :key="index" style="width: 258px;" class="der-right der-bot">{{item.name}}</th>
                      <th v-for="(item,index) in pageData.singleTargetList[1].list" :key="index" style="width: 258px;" class="der-right der-bot">{{item.name}}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="rad-bl10 rad-br10">
                      <td class="der-right"  v-for="(item,index) in pageData.singleTargetList[0].list" :key="index" :class="[index === 0 ? 'rad-bl10' : '', item.value === 0 ? 'cc' : '']">{{item.value}}</td>
                      <td class="der-right"  v-for="(item,index) in pageData.singleTargetList[1].list" :key="index" :class="[index === pageData.singleTargetList[1].list.length-1 ? 'rad-br10' : '', item.value === 0 ? 'cc' : '']">{{item.value}}</td>
                    </tr>
                  </tbody>
                </table>

                <!-- 管理经验分布 -->
                <table class="hrStructure">
                  <thead>
                    <tr class="rad-tl10 rad-tr10"> <th class="rad-tl10 rad-tr10" colspan="9">管理经验分布</th> </tr>
                    <tr class="layer">
                      <th colspan="3" style="width: 600px;" class="der-right">经理级别(正副职)</th>
                      <th colspan="3" style="width: 600px;" class="der-right">总监级别(正副职)</th>
                      <th colspan="3" style="width: 600px;">副总级别以上</th>
                    </tr>
                    <tr class="layer normal">
                      <th style="width: 200px;" class="der-right der-bot">1年以下</th>
                      <th style="width: 200px;" class="der-right der-bot">1-3年</th>
                      <th style="width: 200px;" class="der-right der-bot">3年以上</th>
                      <th style="width: 200px;" class="der-right der-bot">1年以下</th>
                      <th style="width: 200px;" class="der-right der-bot">1-3年</th>
                      <th style="width: 200px;" class="der-right der-bot">3年以上</th>
                      <th style="width: 200px;" class="der-right der-bot">1年以下</th>
                      <th style="width: 200px;" class="der-right der-bot">1-3年</th>
                      <th style="width: 200px;" class="der-right der-bot">3年以上</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="rad-bl10 rad-br10">
                      <td class="der-right rad-bl10">7</td>
                      <td class="der-right">19</td>
                      <td class="der-right">276</td>
                      <td class="der-right">7</td>
                      <td class="der-right">19</td>
                      <td class="der-right">276</td>
                      <td class="der-right">276</td>
                      <td class="der-right">276</td>
                      <td class="der-right rad-br10">276</td>
                    </tr>
                  </tbody>
                </table>

                <!-- 性别/婚姻/职称/学历/司龄/籍贯/年龄分布 -->
                <div class="detailed">
                  <div class="left">
                    <table>
                      <thead>
                        <tr class="rad-tl10 rad-tr10"> <th class="rad-tl10 rad-tr10" colspan="2">性别</th> </tr>
                      </thead>
                      <tbody>
                        <tr :class="pageData.singleTargetList[2].list[0].value === 0 ? 'cc' :''"> <td>男</td> <td>{{pageData.singleTargetList[2].list[0].value}}</td> </tr>
                        <tr :class="pageData.singleTargetList[2].list[1].value === 0 ? 'cc' :''" class="rad-bl10 rad-br10"> <td class="rad-bl10">女</td> <td class="rad-br10">{{pageData.singleTargetList[2].list[1].value}}</td> </tr>
                      </tbody>
                    </table>
                    
                    <table>
                      <thead>
                        <tr class="rad-tl10 rad-tr10"> <th class="rad-tl10 rad-tr10" colspan="2">婚姻</th> </tr>
                      </thead>
                      <tbody>
                        <tr :class="pageData.singleTargetList[8].list[1].value === 0 ? 'cc' :''"> <td>已婚</td> <td>{{pageData.singleTargetList[8].list[1].value}}</td> </tr>
                        <tr :class="pageData.singleTargetList[8].list[0].value === 0 ? 'cc' :''" class="rad-bl10 rad-br10"> <td class="rad-bl10">未婚</td> <td class="rad-br10">{{pageData.singleTargetList[8].list[0].value}}</td> </tr>
                      </tbody>
                    </table>

                    <table>
                      <thead>
                        <tr class="rad-tl10 rad-tr10"> <th class="rad-tl10 rad-tr10" colspan="2">职称</th> </tr>
                      </thead>
                      <tbody>
                        <tr v-for="(item,index) in pageData.singleTargetList[6].list" :key="index" :class="[index === pageData.singleTargetList[6].list.length-1 ? 'rad-bl10 rad-br10 addRad' : '', item.value === 0 ? 'cc' : '']"> <td>{{item.name}}</td> <td>{{item.value}}</td> </tr>
                        <!-- <tr> <td>工程类</td> <td>370</td> </tr>
                        <tr> <td>经济类</td> <td>340</td> </tr>
                        <tr> <td>其他类</td> <td>340</td> </tr>
                        <tr class="rad-bl10 rad-br10" style="height: 50px;"> <td class="rad-bl10"></td> <td class="rad-br10"></td> </tr> -->
                      </tbody>
                    </table>
                  </div>

                  <div class="cen">
                    <table>
                      <thead>
                        <tr class="rad-tl10 rad-tr10"> <th class="rad-tl10 rad-tr10" colspan="2">学历</th> </tr>
                      </thead>
                      <tbody>
                        <tr v-for="(item,index) in pageData.singleTargetList[5].list" :key="index" :class="[index === pageData.singleTargetList[5].list.length-1 ? 'rad-bl10 rad-br10 addRad' : '', item.value === 0 ? 'cc' : '']"> <td>{{item.name}}</td> <td>{{item.value}}</td> </tr>
                        <!-- <tr> <td>硕士及以上</td> <td>370</td> </tr>
                        <tr> <td>本科</td> <td>12%</td> </tr>
                        <tr> <td>大专</td> <td>30</td> </tr>
                        <tr class="rad-bl10 rad-br10"> <td class="rad-bl10">中专及以下</td> <td class="rad-br10">30</td> </tr> -->
                      </tbody>
                    </table>
                    
                    <table>
                      <thead>
                        <tr class="rad-tl10 rad-tr10"> <th class="rad-tl10 rad-tr10" colspan="2">司龄</th> </tr>
                      </thead>
                      <tbody>
                        <tr v-for="(item,index) in pageData.singleTargetList[4].list" :key="index" :class="[index === pageData.singleTargetList[4].list.length-1 ? 'rad-bl10' : '', item.value === 0 ? 'cc' : '']"> <td>{{item.name}}</td> <td>{{item.value}}</td> </tr>
                        <!-- <tr> <td>1-3年</td> <td>12%</td> </tr>
                        <tr> <td>3-5年</td> <td>30</td> </tr>
                        <tr> <td>5-10年</td> <td>30</td> </tr>
                        <tr class="rad-bl10 rad-br10"> <td class="rad-bl10">10年以上</td> <td class="rad-br10">30</td> </tr> -->
                        <tr class="rad-bl10 rad-br10" style="height: 26px;"> <td class="rad-bl10"></td> <td class="rad-br10"></td> </tr>
                      </tbody>
                    </table>
                  </div>

                  <div class="right">
                    <table>
                      <thead>
                        <tr class="rad-tl10 rad-tr10"> <th class="rad-tl10 rad-tr10" colspan="2">籍贯</th> </tr>
                      </thead>
                      <tbody>
                        <tr v-for="(item,index) in pageData.singleTargetList[7].list" :key="index" :class="[index === pageData.singleTargetList[7].list.length-1 ? 'rad-bl10 rad-br10 addRad' : '', item.value === 0 ? 'cc' : '']"> <td>{{item.name}}</td> <td>{{item.value}}</td> </tr>
                        <!-- <tr> <td>人岗匹配率</td> <td>370</td> </tr>
                        <tr> <td>后备人才晋升率</td> <td>340</td> </tr>
                        <tr class="rad-bl10 rad-br10"> <td class="rad-bl10">培训生晋升率</td> <td class="rad-br10">30</td> </tr> -->
                      </tbody>
                    </table>
                    
                    <table>
                      <thead>
                        <tr class="rad-tl10 rad-tr10"> <th class="rad-tl10 rad-tr10" colspan="2">年龄分布</th> </tr>
                      </thead>
                      <tbody>
                        <tr  v-for="(item,index) in pageData.singleTargetList[3].list" :key="index" :class="[index === pageData.singleTargetList[3].list.length-1 ? 'rad-bl10' : '', item.value === 0 ? 'cc' : '']"> <td>{{item.name}}</td> <td>{{item.value}}</td> </tr>
                        <!-- <tr> <td>38-44岁</td> <td>340</td> </tr>
                        <tr> <td>33-37岁</td> <td>30</td> </tr>
                        <tr> <td>28-32岁</td> <td>30</td> </tr>
                        <tr> <td>23-27岁</td> <td>30</td> </tr>
                        <tr class="rad-bl10 rad-br10"> <td class="rad-bl10">23岁以下</td> <td class="rad-br10">11</td> </tr> -->
                        <tr class="rad-bl10 rad-br10" style="height: 26px;"> <td class="rad-bl10"></td> <td class="rad-br10"></td> </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
import { GetHumanResourcesExcelAllInfo, aaa } from "@/api/rl/index";
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      loding1: false,
      loding2: false,
      loding3: false,
      name1: "点击上传",
      name2: "点击上传",
      name3: "点击上传",
      uploading: false,
      file1Name: "",
      file2Name: "",
      file3Name: "",
      pageData: {
        total: {
          earlyStageNum: 0,
          terminalNum: 0,
          addedNum: 0,
          reduceNum: 0,
          netGrowthNum: 0,
          netGrowthRate: 0,
          transferNum: 0,
          transferRate: 0,
          quitNum: 0,
          quitRate: 0,
          personPostMatchingRate: 0,
          reserveTalentsPromotionRate: 0,
          traineePromotionRate: 0,
          talentPoolNum: 0,
          internalRecruitmentNum: 0,
          internalRecruitmentRate: 0
        },
        singleTargetList: [
          {
            name: "职级",
            code: 46001,
            list: [
              {
                name: "基层",
                value: 0,
                percent: null
              },
              {
                name: "中层",
                value: 0,
                percent: null
              },
              {
                name: "高层",
                value: 0,
                percent: null
              }
            ]
          },
          {
            name: "职系",
            code: 46002,
            list: [
              {
                name: "管理系",
                value: 0,
                percent: null
              },
              {
                name: "营销系",
                value: 0,
                percent: null
              },
              {
                name: "技术系",
                value: 0,
                percent: null
              },
              {
                name: "保障系",
                value: 0,
                percent: null
              }
            ]
          },
          {
            name: "性别",
            code: 46003,
            list: [
              {
                name: "男",
                value: 0,
                percent: null
              },
              {
                name: "女",
                value: 0,
                percent: null
              }
            ]
          },
          {
            name: "年龄",
            code: 46004,
            list: [
              {
                name: "23岁以下",
                value: 0,
                percent: null
              },
              {
                name: "23岁到27岁",
                value: 0,
                percent: null
              },
              {
                name: "28岁到32岁",
                value: 0,
                percent: null
              },
              {
                name: "33岁到37岁",
                value: 0,
                percent: null
              },
              {
                name: "38岁到44岁",
                value: 0,
                percent: null
              }
            ]
          },
          {
            name: "司龄",
            code: 46005,
            list: [
              {
                name: "1年以下",
                value: 0,
                percent: null
              },
              {
                name: "1-3年",
                value: 0,
                percent: null
              },
              {
                name: "3-5年",
                value: 0,
                percent: null
              },
              {
                name: "5-10年",
                value: 0,
                percent: null
              }
            ]
          },
          {
            name: "学历",
            code: 46006,
            list: [
              {
                name: "硕士及以上",
                value: 0,
                percent: null
              },
              {
                name: "本科",
                value: 0,
                percent: null
              },
              {
                name: "大专",
                value: 0,
                percent: null
              },
              {
                name: "中专及以下及其他",
                value: 0,
                percent: null
              }
            ]
          },
          {
            name: "职称",
            code: 46007,
            list: [
              {
                name: "工程类",
                value: 0,
                percent: null
              },
              {
                name: "其他类",
                value: 0,
                percent: null
              },
              {
                name: "无",
                value: 0,
                percent: null
              }
            ]
          },
          {
            name: "区域",
            code: 46008,
            list: [
              {
                name: "河南",
                value: 0,
                percent: null
              },
              {
                name: "洛阳市",
                value: 0,
                percent: null
              },
              {
                name: "外省",
                value: 0,
                percent: null
              }
            ]
          },
          {
            name: "婚姻状态",
            code: 46009,
            list: [
              {
                name: "未婚",
                value: 0,
                percent: null
              },
              {
                name: "已婚",
                value: 0,
                percent: null
              }
            ]
          }
        ]
      }
    };
  },
  mounted() {
    // this.jqFun();
  },
  methods: {
    // jqFun(){
    //   $("#aaa").click = function(){

    //   }
    // },

    //     function upload(){
    //     $('.myfile').change(function(){
    //         其他代码
    //         .
    //         .
    //         .
    //         $('.myfile').replaceWith('<input type="file" class="myfile"');//新的input替代旧的
    //         upload();//至关重要
    //     );
    // }
    // 职系分布
    handleClose() {
      // const h = this.$createElement;
      this.$msgbox({
        title: "请选择板块",
        dangerouslyUseHTMLString: true,
        message:
          '<select id="aaa" style="width:100%;border-radius: 5px;height: 35px;"><option value ="集团公司">集团公司</option><option value ="地产">地产</option><option value ="房联行(郑州)">房联行(郑州)</option><option value ="房联行(洛阳)">房联行(洛阳)</option><option value ="物业">物业</option><option value ="融媒">融媒</option><option value ="产业园">产业园</option><option value ="浩德钢圈">浩德钢圈</option><option value ="金控">金控</option><option value ="浩德资本">浩德资本</option></select>',
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            this.fetchPageData(document.getElementById("aaa").value);
            done();
          } else {
            done();
          }
        }
      }).then(action => {
        this.$message({
          type: "info",
          message: "action: " + action
        });
      });
    },
    async fetchPageData(value) {
      var p = { fileNameTypeList: [], plateName: value };
      if (this.file1Name !== "") {
        p.fileNameTypeList.push({
          fileName: this.file1Name,
          fileType: 47001
        });
      }
      if (this.file2Name !== "") {
        p.fileNameTypeList.push({
          fileName: this.file2Name,
          fileType: 47002
        });
      }
      if (this.file3Name !== "") {
        p.fileNameTypeList.push({
          fileName: this.file3Name,
          fileType: 47003
        });
      }
      try {
        var res = await GetHumanResourcesExcelAllInfo(p);
        if (res.data.code === "0") {
          var result = res.data.result;
          if (
            !result.total.earlyStageNum &&
            typeof result.total.earlyStageNum !== "undefined" &&
            result.total.earlyStageNum !== 0
          ) {
            result.total.earlyStageNum = 0;
          }
          this.$set(this, "pageData", result);
          this.$message({
            message: res.data.msg,
            type: "success"
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: "error"
          });
        }
      } catch (e) {
        console.log(e);
      }
    },
    removeFun(id, fileName, loding, name) {
      var self = this;
      var domItem = $(id)[0].files[0];
      if (domItem !== "" && typeof domItem !== "undefined") {
        $(id).val("");
        // domItem.select();
        // domItem.selection.clear();
        self.$set(self, fileName, "");
        self.$set(self, name, "点击上传");
      }
    },
    fileChangeFun(id, fileName, loding, name) {
      var self = this;
      var formData = new FormData();
      var domItem = $(id)[0].files[0];
      formData.append("file", domItem);
      if (domItem !== "" && typeof domItem !== "undefined") {
        $.ajax({
          url: process.env.BASE_API + aaa,
          type: "POST",
          data: formData,
          processData: false,
          contentType: false,
          // dataType: "json",
          beforeSend: function() {
            self.$set(self, loding, true);
          },
          success: function(data) {
            if (data.code === "0") {
              formData = null;
              self.$message({
                message: data.msg,
                type: "success"
              });
              self.$set(self, fileName, data.result.realFileName);
              self.$set(self, name, domItem.name);
              console.log(self.file1Name);
            } else {
              self.$message({
                message: data.msg,
                type: "error"
              });
              domItem.value = "";
            }
            self.$set(self, loding, false);
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/base/_parameters";

$titleColor: #2ff0d2;
$subTitleColor: rgba(#2ff0d2, 0.6);
$fontColor: #fff;
$borderColor: rgba(#2e3192, 0.5);
$btnColor: #169bd5;
$backColor: rgba(0, 0, 0, 0.3);
$hoverColor: #518388;
.flh_dataBase {
  .cc {
    color: #666 !important;
  }
  .rad-tl10 {
    border-top-left-radius: 10px;
  }
  .rad-tr10 {
    border-top-right-radius: 10px;
  }
  .rad-bl10 {
    border-bottom-left-radius: 10px;
  }
  .rad-br10 {
    border-bottom-right-radius: 10px;
  }
  @include absoluteAllSides;
  background-color: #151531;
  .main {
    @include absoluteAllSides(60, 60, 0, 60, 1);
    h1.title {
      color: $titleColor;
      @include blod(32px);
      line-height: 1;
    }
    .tableView {
      @include absoluteAllSides(60, 0, 0, 0, 1);
      overflow-y: scroll;
      tr {
        height: 78px;
        color: $fontColor;
        background-color: $backColor;
        border-bottom: 1px solid $borderColor;
        &:nth-last-of-type(1) {
          border-bottom: none;
        }
        td {
          font-size: 24px;
          text-align: center;
          &:nth-of-type(2) {
            font-size: 20px;
          }
        }
        th {
          height: 84px;
          color: $titleColor;
          @include blod(24px);
          background-color: $backColor;
        }
      }
      // 运算依据
      .basis {
        .txt {
          margin-bottom: 15px;
          .title {
            color: $titleColor;
            font-size: 26px;
            line-height: 1;
          }
          .subTitle {
            margin-left: 5px;
            color: $subTitleColor;
            font-size: 18px;
            line-height: 1;
          }
        }
        .basisTable {
          width: 100%;
          thead {
            th {
              &:nth-of-type(1) {
                border-right: 1px solid $borderColor;
              }
            }
          }
          tbody {
            tr > td {
              position: relative;
              border-right: 1px solid $borderColor;
              input[type="file"] {
                position: absolute;
                top: 20px;
                left: 500px;
                z-index: 1;
                opacity: 0;
                cursor: pointer;
              }
              span {
                display: block;
                position: relative;
                line-height: 78px;
                text-decoration: underline;
                cursor: pointer;
                .mask {
                  position: absolute;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  z-index: 10;
                }
              }
            }
          }
        }
        .basisBtn {
          display: flex;
          justify-content: flex-end;
          margin-top: 20px;
          a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 110px;
            height: 50px;
            color: #000;
            font-size: 24px;
            background-color: #31cee6;
            border-radius: 10px;
          }
        }
      }
      // 运算结果
      .result {
        margin-top: 30px;
        .title {
          margin-bottom: 15px;
          color: $titleColor;
          font-size: 26px;
          line-height: 1;
        }
        // 人员数量指标/人员流动指标/人员能力指标
        .personnel {
          display: flex;
          align-items: center;
          margin-bottom: 30px;
          table {
            width: 586px;
            tr {
              td {
                &:nth-of-type(1) {
                  width: 214px;
                  border-right: 1px solid $borderColor;
                }
                &:nth-of-type(2) {
                  width: 372px;
                  @include din(30px);
                }
              }
            }
            &:nth-of-type(2) {
              margin: 0 20px;
            }
          }
          tbody > tr:hover {
            background-color: $hoverColor;
            & > td {
              color: #fff;
              &:nth-of-type(1) {
                font-size: 24px;
                font-weight: bold;
              }
            }
          }
        }

        // 人力资源结构指示
        .hrStructure {
          margin-bottom: 30px;
          tbody {
            margin-bottom: 30px;
            tr > td {
              @include din(30px);
            }
            td:hover {
              color: #fff;
              background-color: $hoverColor;
            }
          }
        }
        // 详细
        .detailed {
          display: flex;
          margin-bottom: 30px;
          .left,
          .cen,
          .right {
            table {
              width: 586px;
              margin-bottom: 20px;
              tr {
                td {
                  &:nth-of-type(1) {
                    width: 214px;
                    border-right: 1px solid $borderColor;
                  }
                  &:nth-of-type(2) {
                    width: 372px;
                    @include din(30px);
                  }
                }
              }
              tbody > tr:hover {
                background-color: $hoverColor;
                & > td {
                  color: #fff;
                  &:nth-of-type(1) {
                    font-size: 24px;
                    font-weight: bold;
                  }
                }
              }
              .addRad {
                & > td:nth-of-type(1) {
                  border-bottom-left-radius: 10px;
                }
                & > td:nth-of-type(2) {
                  border-bottom-right-radius: 10px;
                }
              }
            }
          }
          .cen {
            margin: 0 20px;
          }
        }
      }
    }
  }
  .layer {
    th {
      height: 78px !important;
      color: #fff !important;
      background-color: transparent !important;
    }
  }
  .normal {
    th {
      font-weight: normal !important;
    }
  }
  .der-right {
    border-right: 1px solid $borderColor;
  }
  .der-bot {
    border-bottom: 1px solid $borderColor;
  }
}
</style>

